<template>
  <Row>
    <Col span="6" order="1">
      <group_tree :tree_data="tree_data" @onLoadTreeData="loadTreeData" @onNodeClick="nodeClick"
                  :isMultiple="false"></group_tree>
    </Col>
    <Col span="18" order="2">
      <Form ref="schedulerformInline" inline :style="{'padding-top': '20px'}">
        <FormItem>
          <Input type="text" placeholder="请输入定时任务说明" size="large" style="width: 300px" clearable
                 v-model="search_comment"></Input>
        </FormItem>
        <FormItem>
          <Select style="width:300px" size="large" clearable v-model="status">
            <Option v-for="(item, index) in search_status" :value="item.value" :key="index">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem>
          <DatePicker type="date" placeholder="创建时间-起始..." style="width: 300px" clearable size="large"
                      @on-change="handle_search_start_create_time" editable></DatePicker>
        </FormItem>
        <FormItem>
          <Icon type="minus-round"></Icon>
          <Icon type="minus-round"></Icon>
        </FormItem>
        <FormItem>
          <DatePicker type="date" placeholder="创建时间-结束..." style="width: 300px" clearable size="large"
                      @on-change="handle_search_end_create_time" editable></DatePicker>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="loadTableData" size="large">查询</Button>
        </FormItem>
      </Form>
      <Button type="info"
              icon="android-add-circle"
              shape="circle"
              @click="add_scheduler"
              :disabled="btn_disabled">增加
      </Button>

      <Button type="info"
              icon="eye"
              shape="circle"
              @click="show_joblist">查看调度中的定时任务
      </Button>

      <scheduler_table :column_header="column_header" :table_data="table_data"
                       :total_page="total_page"></scheduler_table>
      <Page :total="total_page" class="page_tools" @on-change="change" @on-page-size-change="change"></Page>
    </Col>
  </Row>
</template>
<script>
  import group_tree from '../utils/tree_components_util'
  import scheduler_table from '../utils/table_components_util'

  export default {
    data() {
      return {
        column_header: [
          {type: 'selection', width: 60, align: 'center'},
          {title: '定时任务说明', key: 'comment', align: 'left'},
          {
            title: '执行状态', key: 'status', align: 'center',
            render: (h, params) => {
              //执行状态  0.未执行 1.执行中 2.执行成功 3.执行失败
              var text = '未执行';
              if (params.row.status == 1) {
                text = "执行中"
              } else if (params.row.status == 2) {
                text = "执行成功"
              } else if (params.row.status == 3) {
                text = "执行失败"
              }
              return h('div', [
                h('span', {}, text)
              ]);
            }
          },
          {
            title: '是否启用', key: 'is_enable', align: 'center',
            render: (h, params) => {
              //启用状态 0.未启用 1.已启用
              var text = '未启用';
              if (params.row.is_enable == 1) {
                text = "已启用"
              }
              return h('div', [
                h('span', {}, text)
              ]);
            }
          },
          {title: '执行频率', key: 'interval', align: 'left'},
          {title: '执行方法', key: 'execute_method', align: 'left'},
          {title: '创建人', key: 'creator', align: 'left'},
          {title: '创建时间', key: 'create_time', align: 'left'},
          {title: '执行异常', key: 'error_msg', align: 'left'},
          {
            title: "立即执行",
            key: "instantDeath",
            align: "center",
            render: (h, params) => {
              return h("div", [
                h('Icon', {
                  props: {
                    type: 'play',
                    size: '20',
                    color: 'green'
                  },
                  style: {
                    marginRight: '5px',
                    cursor: 'pointer'
                  },
                  on: {
                    click: () => {
                      this.$http.post(this.apiUrl() + "scheduler/instantDeath/", {
                        id: params.row.id
                      }, {
                        emulateJSON: true
                      }).then((response) => {
                        if (response.body.success) {
                          this.$Message.success(response.body.msg);
                          this.loadTableData();
                        } else {
                          this.$Notice.error({title: '错误', desc: response.body.msg});
                        }
                      });
                    }
                  }
                }, 'View')
              ])
            }
          },
          {
            title: "启用",
            key: "instantDeath",
            align: "center",
            render: (h, params) => {
              return h("div", [
                h('Icon', {
                  props: {
                    type: 'clock',
                    size: '20'
                  },
                  style: {
                    marginRight: '5px',
                    cursor: 'pointer'
                  },
                  on: {
                    click: () => {
                      this.$http.post(this.apiUrl() + "scheduler/startscheduler/", {
                        id: params.row.id
                      }, {
                        emulateJSON: true
                      }).then((response) => {
                        if (response.body.success) {
                          this.$Message.success(response.body.msg);
                          this.loadTableData();
                        } else {
                          this.$Notice.error({title: '错误', desc: response.body.msg});
                        }
                      });
                    }
                  }
                }, 'View')
              ])
            }
          },
          {
            title: "停用",
            key: "stopDeath",
            align: "center",
            render: (h, params) => {
              return h("div", [
                h('Icon', {
                  props: {
                    type: 'stop',
                    size: '20',
                    color: 'red'
                  },
                  style: {
                    marginRight: '5px',
                    cursor: 'pointer'
                  },
                  on: {
                    click: () => {
                      this.$http.post(this.apiUrl() + "scheduler/stopDeath/", {
                        id: params.row.id
                      }, {
                        emulateJSON: true
                      }).then((response) => {
                        if (response.body.success) {
                          this.$Message.success(response.body.msg);
                          this.loadTableData();
                        } else {
                          this.$Notice.error({title: '错误', desc: response.body.msg});
                        }
                      });
                    }
                  }
                }, 'View')
              ])
            }
          },
          {
            title: '操作', key: 'handler', align: 'center', render: (h, params) => {
              const _this = this;
              return h('div', [
                h('Icon', {
                  props: {
                    type: 'edit',
                    size: '20'
                  },
                  style: {
                    marginRight: '5px',
                    cursor: 'pointer'
                  },
                  on: {
                    click: () => {
                      this.$emit('childClickMenu', '系统管理', '定时任务管理', 'scheduler_edit', {"id": params.row.id});
                    }
                  }
                }, 'View'),
                h('Icon', {
                  props: {
                    type: 'trash-a',
                    size: '20'
                  },
                  style: {
                    cursor: 'pointer'
                  },
                  on: {
                    click: () => {
                      if (params.row.id == -1) {
                        this.$Notice.error({title: '警告', desc: '基础数据不可以删除!'});
                        return;
                      }
                      this.$Modal.warning({
                        title: "注意",
                        content: "确定要删除数据吗？",
                        onOk: function () {
                          this.$http.delete(this.apiUrl() + 'scheduler/delete/' + params.row.id, {
                            emulateJSON: true
                          }).then((response) => {
                            if (response.body.success) {
                              this.$Message.success(response.body.msg);
                              _this.loadTableData();
                            } else {
                              this.$Notice.error({title: '错误', desc: response.body.msg});
                            }
                          });
                        }
                      });
                    }
                  }
                }, 'Delete')
              ]);
            }
          }
        ],
        table_data: [],
        total_page: 0,
        current_page: 1,
        tree_data: [],
        current_group_id: '',
        search_comment: '',
        status: "",
        search_status: [{
          value: "",
          label: "请选择"
        }, {
          value: "0",
          label: "未执行"
        }, {
          value: "1",
          label: "执行中"
        }, {
          value: "2",
          label: "执行成功"
        }, {
          value: "3",
          label: "执行失败"
        }],
        search_start_create_time: '',
        search_end_create_time: '',
        btn_disabled: true
      }
    },
    //注册组件
    components: {
      group_tree: group_tree,
      scheduler_table: scheduler_table
    },
    created: function () {
      //加载表格数据
      this.loadTableData();
      //加载机构树数据
      this.loadTreeData();
    },
    methods: {
      handle_search_start_create_time: function (changeValue, date) {
        this.search_start_create_time = changeValue;
      },
      handle_search_end_create_time: function (changeValue, date) {
        this.search_end_create_time = changeValue;
      },
      /**
       * 点击分页，页数标签时调用的方法
       * @param page_num  页码改变的回调，返回改变后的页码
       */
      change: function (page_num) {
        this.current_page = page_num;
        this.loadTableData();
      },
      loadTableData: function () {
        this.$http.post(this.apiUrl() + "scheduler/grid/", {
          group_id: this.current_group_id,
          search_comment: this.search_comment,
          search_status: this.status,
          search_start_create_time: this.search_start_create_time,
          search_end_create_time: this.search_end_create_time,
          current_page: this.current_page
        }, {
          emulateJSON: true
        }).then((response) => {
          if (response.body.success) {
            this.table_data = response.body.grid;
            this.total_page = response.body.total_count;
          }
        });
      },
      loadTreeData: function (item, callback) {
        var parentid = '-1';
        if (item != undefined) {
          parentid = item.id;
        }
        this.$http.post(this.apiUrl() + "group/tree/", {
          parent_id: parentid
        }, {
          emulateJSON: true
        }).then((response) => {
          if (item != undefined) {
            callback(response.body);
          } else {
            this.tree_data = response.body;
          }
        });
      },
      nodeClick: function (node) {
        var groupid = node.id;
        this.current_group_id = groupid;
        this.loadTableData();
        this.btn_disabled = false;
      },
      add_scheduler: function () {
        this.$emit('childClickMenu', '系统管理', '定时任务管理', 'scheduler_edit', {"group_id": this.current_group_id, "id": ''});
      },
      /**
       * 显示调度中的任务列表
       */
      show_joblist: function () {
        this.$emit('childClickMenu', '系统管理', '定时任务管理', 'job_list', {});
      }
    }
  }
</script>
<style scoped>
  .page_tools {
    float: right;
    padding-top: 10px;
    padding-bottom: 10px;
  }
</style>
